<template>
  <el-dialog :close-on-click-modal="false"   :visible.sync="show" :lock-scroll="false"
   class="warranty_dialog login_diaplog" :before-close="cancle" > 
    <el-form :model="form" :rules="rules" ref="form">
      <p class="title">{{$t('REGISTER.TITLE')}}</p>
      <p class="formTitle">{{$t('DEFAULT.SIGNEMAI')}}</p>
      <el-form-item  prop="email">
        <el-input  v-model="form.email" name="email" ></el-input>
      </el-form-item>
      <p class="formTitle">{{$t('DEFAULT.PASSWORD')}}</p>
      <el-form-item  prop="password" class="password">
        <el-input  v-model="form.password" :type="showPsw" name="password">
            <i @click="isPswShow" slot="suffix" :class="showPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>
        </el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <div>
        <!-- <el-button @click="cancle()">Cancel</el-button> -->
        <el-button class="login" @click="submitForm()" :loading="isRequest"  :class="{'isFull': isFull}">{{$t('DEFAULT.SIGNIN')}}</el-button>
      </div>
      <p class="link"><span @click="goTo('/signUp')">{{$t('DEFAULT.SIGNUP')}}</span>|<span @click="goTo('/forget_password')">{{$t('REGISTER.FORGETPSW')}}</span></p>
    </span>
  </el-dialog>
</template>

<script>
import { login } from '@/api/register.js'
export default {
  data() {
    return {
      isRequest: false,
      showPsw: 'password',
      form:{
        email: '',
        password: ''
      },
    }
  },
  props: {
    show: Boolean,
    closeDialog:Function,
  },
  computed: {
    isFull () {
      let isFull = false
      let password =  this.form.password.length > 0
      let email = this.form.email.length > 0
      if (password && email ){
        this.$refs.form.validate((valid) => {
          if(valid){
            isFull =  true
          } 
        })
      } 
      
      return isFull
    },
    rules () {
      return {
        password: [
          { required: true, trigger: 'change' },
          { min: 6, max: 12, message: this.$t('DEFAULT.MSGPWSLEN'), trigger: 'change' },
        ],
        email: [
          { required: true, trigger: 'change' },
          { type: 'email', message: this.$t('DEFAULT.CORRECTEMAIL'), trigger: 'change' },
        ],
      }
    }
  }, 
  methods: {
    goTo (link) {
      this.$router.push(link)
    },
    cancle () {
      this.$emit('closeDialog')
    },
    isPswShow () {
      if(this.showPsw == 'password'){
        this.showPsw = 'text'
      } else {
        this.showPsw = 'password'
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if(valid){
          this.logIn()
        } else {
          return false
        }
      })
    },
    logIn(){
      this.isRequest = true
      let params = this.form
      login(params).then(res=>{
        if(res.state == 1) {
          this.$store.dispatch('ToggleUserInfo', res.data);
          // this.$message.success('登录成功')
           this.$message.success( this.$t('DEFAULT.MSGLOGINSUCCESS'))    
           this.cancle()
        }
        this.isRequest = false
      })
    },
  }
}
</script>

<style lang="scss">
@import '@/styles/explore/details.scss';
</style>